<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // 当需要多个use的时候就是用数组不需要再一个一个的引入
        layui.use(['layer', "form", "laypage"], function () {
            let layer = layui.layer;
            let form = layui.form;
            let laypage = layui.laypage;
            data = {
                pagenum: 1, // 获取第1页的数据
                pagesize: 5, // 每页显示2条数据
            }
            //  当使用到文本域展示图片时引入其layui
            $('#image').cropper({
                // 纵横比(宽高比)
                aspectRatio: 1 / 1, // 正方形
                // 指定预览区域
                preview: '.img-preview' // 指定预览区的类名（选择器）
            });
            // 相当于是在调用其方法  当点击当上传按钮就是显示文件
            $('#upload').click(function () {
                $('#file').click()
            });
            // 使用flie 使用change事件 当内容发生改变时候触发
            $('#file').on('change', function () {
                let fileObj = this.files[0]
                // console.log(fileObj.name) /* 获取到上传图片的路劲地址 */
                //    官方提供的语法让其对象按人家一定的格式转换成所需要的url地址
                let url = URL.createObjectURL(fileObj)
                // 让其图片展示到页面当中去
                $('#image').cropper('replace', url)

            })
            // 点击确认按钮表示确定更改图片
            $('#user').click(function () {
                let canvas = $('#image').cropper('getCroppedCanvas', {
                    width: 100,
                    height: 100
                });
                let base64 = canvas.toDataURL('image/png');;
            })
            当使用需要显示页数及其分页的情况下
            laypage.render({
                elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
                count: res.total, //数据总数，从服务端得到
                limit: data.pagesize,
                // 提供好看的页面 不是必须项
                limits: [3, 5, 6, 10],
                layout: ['prev', 'page', 'next', 'count', 'limit', 'skip'],
                jump: function (obj, first) {
                    // first: undefined是用户自己切换的！
                    // obj.curr:  可以获取切换后当前页码
                    // obj.limit: 可以获取切换后当前显示条数
                    if (first == undefined) {
                        data.pagenum = obj.curr
                        data.pagesize = obj.limit
                        // 当等于unbefined时就是用户切换的 递归函数 每点击一次就调用一次使页重新加载
                        ran()

                    }

                }
            });
        });
    </script>
</body>

</html>